<template>
  <a-breadcrumb>
    <a-breadcrumb-item v-for="item of getBread()" :key="item.title">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { RouteRecordRaw } from "vue-router";
import RouterConfig from "../config/router.config";

export default class Breadcrumb extends Vue {
  public getBread(): Array<string> {
    let breads: Array<string> = this.$route.path.substring(1).split("/");
    let routerRecor:
      | Array<RouteRecordRaw>
      | undefined = new RouterConfig().getRouter();
    let breadNames: Array<any> = [];
    for (let i: number = 0; i < breads.length; i++) {
      let bread: string = breads[i];
      let value: RouteRecordRaw | null = this.getRouteRecord(
        bread,
        routerRecor
      );
      if (value) {
        breadNames.push({ title: (value.meta as any).title, path: value.path });
        console.log(breadNames);
        routerRecor = value.children;
      }
    }
    return breadNames;
  }

  public getRouteRecord(
    val: string,
    recourds: Array<RouteRecordRaw> | undefined
  ): RouteRecordRaw | null {
    if (recourds) {
      for (let i: number = 0; i < recourds.length; i++) {
        let recourd: RouteRecordRaw = recourds[i];
        if (recourd.name === val) {
          return recourd;
        }
      }
    }
    return null;
  }
}
</script>